<script setup lang="ts">

import { ref } from 'vue';
import Delete from "@iconify-icons/ep/delete";
import Plus from "@iconify-icons/ep/plus";
import { ElMessage } from "element-plus";
const radioData = ref('1')
const windowHeight = ref(window.innerHeight);
const requestMethodsvalues = ref('GET');
const urlValue = ref('');
const interfaceName = ref('');
const multipleSelection = ref<Form[]>([])
const requestJson = ref('');
const selectable = (row: Form) => ![1, 2].includes(row.paramId)
interface Form {
  paramId: number
  key: string
  keyValue: string
  des: string
}
const handleSelectionChange = (val: Form[]) => {
  multipleSelection.value = val
}

const options = [
  { value: 'GET', label: 'GET', },
  { value: 'POST', label: 'POST', },
  { value: 'PUT', label: 'PUT', },
  { value: 'DELETE', label: 'DELETE', },
];
const paramTableData = ref([
  {
    id: 1,
    paramName: '',
    paramValue: '',
  },
]);
const headerTableData = ref([
  {
    id: 1,
    paramName: '',
    paramValue: '',
  },
]);
const bodyTableData = ref([
  {
    id: 1,
    paramName: '',
    paramValue: '',
  },
]);
const addRow = (type) => {
  const newRow = {
    id: (type === 'param' ? paramTableData.value :
      type === 'header' ? headerTableData.value : bodyTableData.value
    ).length + 1,
    paramName: '',
    paramValue: '',
  };
  if (type === 'param') {
    paramTableData.value.push(newRow);
  } else if (type === 'header') {
    headerTableData.value.push(newRow);
  } else if (type === 'body') {
    bodyTableData.value.push(newRow);
  }
};
// 删除行
const deleteRow = (type, row) => {
  let data;
  if (type === 'param') {
    data = paramTableData.value;
  } else if (type === 'header') {
    data = headerTableData.value;
  } else if (type === 'body') {
    data = bodyTableData.value;
  }

  const index = data.indexOf(row);
  if (index > -1) {
    data.splice(index, 1);
  }
};

const handleSave = async () => {
  if (!interfaceName.value) {
    // 如果输入框没有内容，弹出提示
    ElMessage.warning('接口未命名');
  } else {
    // 如果有内容，执行保存逻辑
    console.log('保存接口名称：', interfaceName.value);
    // 你可以在这里调用保存接口的代码
  }
}
</script>
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>接口测试</span>
      </div>
    </template>
    <div class="bg-gray-50 text-gray-800 font-sans w-full h-screen flex flex-col">
      <!-- Header -->
      <div class="flex items-center justify-between bg-white px-4 py-2 border-b border-gray-200">
        <div class="flex items-center space-x-2" style="width: 100%">
          <el-input v-model="interfaceName" style="width: 100%" placeholder="请输入接口名称" />

        </div>
        <el-button @click="handleSave">保存</el-button>
      </div>

      <!-- Main Content -->
      <div class="flex-grow flex flex-col">
        <!-- URL Input -->
        <div class="flex items-center bg-white px-4 py-2 border-b border-gray-200">
          <el-select v-model="requestMethodsvalues" placeholder="Select" style="width: 120px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input type="text" v-model="urlValue" placeholder="请输入URL" />
          <el-button type="primary" @click="">发送</el-button>
        </div>

        <!-- Tabs -->
        <div class="flex items-center bg-white px-4 py-2 border-b border-gray-200">
          <el-tabs type="border-card" class="demo-tabs w-full h-full">
            <el-tab-pane label="参数">
              <div>
                <el-button type="primary" plain size="small" @click="addRow('param')">
                  <IconifyIconOffline :icon="Plus" />添加参数
                </el-button>
              </div>

              <el-table ref="multipleTableRef" :data="paramTableData" row-key="id" style="width: 100%" height="250"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column prop="paramName" label="参数名" width="250">
                  <template v-slot="scope"><el-input v-model="scope.row.paramName" /></template>

                </el-table-column>
                <el-table-column prop="paramValue" label="参数值" width="500">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.paramValue" />
                  </template>
                </el-table-column>
                <el-table-column prop="des" label="描述" width="600">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.des" />
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template v-slot="scope">
                    <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                      <el-button circle size="small" type="danger" @click="deleteRow('param', scope.row)">
                        <IconifyIconOffline :icon="Delete" />
                      </el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="请求头">
              <div>
                <el-button type="primary" plain size="small" @click="addRow('header')">
                  <IconifyIconOffline :icon="Plus" /> 添加参数
                </el-button>
              </div>

              <el-table ref="headerTableRef" :data="headerTableData" row-key="id" style="width: 100%" height="250">
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column prop="paramName" label="参数名" width="250">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.paramName" />
                  </template>
                </el-table-column>
                <el-table-column prop="paramValue" label="参数值" width="500">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.paramValue" />
                  </template>
                </el-table-column>
                <el-table-column prop="des" label="描述" width="600">
                  <template v-slot="scope">
                    <el-input v-model="scope.row.des" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template v-slot="scope">
                    <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                      <el-button circle size="small" type="danger" @click="deleteRow('header', scope.row)">
                        <IconifyIconOffline :icon="Delete" />
                      </el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="请求体">
              <el-scrollbar>
                <el-radio-group v-model='radioData'>
                  <el-radio :label='1'>form-data</el-radio>
                  <el-radio :label='2'>raw</el-radio>
                </el-radio-group>
                <div v-if="radioData == '1'">
                  <div>
                    <el-button type="primary" plain size="small" @click="addRow('body')">
                      <IconifyIconOffline :icon="Plus" />添加参数
                    </el-button>
                  </div>

                  <el-table ref="multipleTableRef" :data="bodyTableData" row-key="id" style="width: 100%" height="250"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :selectable="selectable" width="55" />
                    <el-table-column prop="paramName" label="参数名" width="250">
                      <template v-slot="scope"><el-input v-model="scope.row.paramName" /></template>

                    </el-table-column>
                    <el-table-column prop="paramValue" label="参数值" width="500">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.paramValue" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="des" label="描述" width="600">
                      <template v-slot="scope">
                        <el-input v-model="scope.row.des" />
                      </template>
                    </el-table-column>

                    <el-table-column label="操作">
                      <template v-slot="scope">
                        <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                          <el-button circle size="small" type="danger" @click="deleteRow('body', scope.row)">
                            <IconifyIconOffline :icon="Delete" />
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="text" v-if="radioData == '2'">
                  <el-input v-model="requestJson" :rows="10" type="textarea" />
                </div>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- Response Tabs -->
        <div class="flex items-center bg-white px-4 py-2 border-b border-gray-200">
          <el-tabs type="border-card" class="demo-tabs w-full h-full">
            <el-tab-pane label="响应体">
              <div></div>
              <el-scrollbar>
                <div class="text">
                  <el-input readonly :rows="2" type="textarea" autosize />
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="响应头">
              <el-table ref="multipleTableRef" :data="paramTableData" row-key="id" style="width: 100%" height="250"
                @selection-change="handleSelectionChange">
                <el-table-column width="55" />
                <el-table-column prop="paramName" label="参数名" width="250">
                  <el-input />
                </el-table-column>
                <el-table-column prop="paramValue" label="参数值" width="700">
                  <el-input />
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="cookie">
              <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%" height="250"
                @selection-change="handleSelectionChange">
                <el-table-column width="55" />
                <el-table-column prop="paramName" label="参数名" width="250">
                  <el-input />
                </el-table-column>
                <el-table-column prop="paramValue" label="参数值" width="700">
                  <el-input />
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
</style>
